<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		*{
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		#box{
				width: 413px;
				height: 278px;
				background: #171313;
				margin: 0 auto;
				position: relative;
		}
			#u1{
				height: 59px;
				list-style: none;
				font-size: 14px;
			}
			#u1 li{
				float: left;
				width: 68px;
				line-height: 59px;
				text-align: center;
				margin-left: 5px;
				border-top: 3px solid #171313;
			}
			#u1 li:hover{
				border-top: 3px solid red;
			}
			#u1 li a{
				text-decoration: none;
				color: #c4a763;
				font-family: "微软雅黑";
			}
			.content{
				list-style: none;
				height: 219px;
			}
			.content li{
				height: 27px;
				line-height: 27px;
				padding: 0 10px 0 20px;
			}
			.content li:hover a{
				color: #ec380f;
			}
			.content li a{
				text-decoration: none;
				color: #b8afa2;
				font-size: 14px;
			}
			.content li span{
				color: #b8afa2;
				font-size: 14px;
				float: right;
			}
			.content li:first-child{
				width: 371px;height: 34px;background: black;
				line-height: 34px;
				text-align: center;
				margin-left: 20px;
			}
			.content li:first-child a{
				color: #ec380f;
				font-weight: bold;
			}
			#bg{
				position: absolute;
				top: 26px;
				right: 4px;
			}
		</style>
		
	</head>
	<body>
		<div id="box">
		<ul id="u1">
			<li class="choosed"><a href="#">新闻</a></li>
			<li><a href="#">公告</a>	</li>
			<li><a href="#">活动</a></li>
			<li><a href="#">赛事</a></li>
			<li><a href="#">社区</a></li>	
		</ul>
		<div style="clear: both;"></div>
				<ul class="content" name="content">
					<li><a href="#">[新闻]超值玉兔萌宠礼包，中秋必备！</a></li>
					<li><a href="#">[新闻]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>
					<li><a href="#">[新闻]超值玉兔萌宠礼包，中秋必备！</a><span>09/02</span></li>
					<li><a href="#">[新闻]超值玉兔萌宠礼包，中秋必备！</a><span>08/09</span></li>
					<li><a href="#">[新闻]超值玉兔萌宠礼包，中秋必备！</a><span>08/21</span></li>
					<li><a href="#">[新闻]超值玉兔萌宠礼包，中秋必备！</a><span>08/27</span></li>
					<li><a href="#">[新闻]超值玉兔萌宠礼包，中秋必备！</a><span>08/28</span></li>	
				</ul>
				
				<ul class="content" name="content" style="display: none;">
					<li><a href="#">[公告]9月08日05点停机维护公告！</a></li>
					<li><a href="#">[公告]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>
					<li><a href="#">[公告]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>
					<li><a href="#">[公告]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>
					<li><a href="#">[公告]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>
					<li><a href="#">[公告]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>
					<li><a href="#">[新闻]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>	
				</ul>
				<ul class="content" name="content" style="display: none;">
					<li><a href="#">[活动]超值玉兔萌宠礼包，中秋必备！</a></li>
					<li><a href="#">[活动]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>
					<li><a href="#">[活动]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>
					<li><a href="#">[活动]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>
					<li><a href="#">[活动]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>
					<li><a href="#">[活动]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>
					<li><a href="#">[活动]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>	
				</ul>
				<ul class="content" name="content" style="display: none;">
					<li><a href="#">[赛事]战旗格斗精英团队赛正式开打！</a></li>
					<li><a href="#">[其他]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>
					<li><a href="#">[格斗大赛]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>
					<li><a href="#">[格斗大赛]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>
					<li><a href="#">[格斗大赛]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>
					<li><a href="#">[格斗大赛]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>
					<li><a href="#">[格斗大赛]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>	
				</ul>
				<ul class="content" name="content"style="display: none;">
					<li><a href="#">[论坛]DNF心悦客服火热招聘中！！！</a></li>
					<li><a href="#">[论坛]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>
					<li><a href="#">[论坛]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>
					<li><a href="#">[论坛]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>
					<li><a href="#">[论坛]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>
					<li><a href="#">[论坛]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>
					<li><a href="#">[社区]超值玉兔萌宠礼包，中秋必备！</a><span>08/29</span></li>	
				</ul>
				<div id="bg">
					<img src="img/QQ截图20160910115426.png" />
				</div>
		</div>
		
	</body>
</html>
<script type="text/javascript">
	var lis = document.getElementById("u1").getElementsByTagName("li");
				for(var i = 0; i < lis.length; i++){
					lis[i].onmouseover = function(){
						//1、循环一次所有的li标签，将所有的li标签设置为class为空
						//2、将所有的content设置为display:none
						var divs = document.getElementsByName("content");
						var index; 
						//获取当前li的下标
						for(var j = 0; j < lis.length; j++){
							lis[j].className = "";
							divs[j].style.display = "none";
							//判断循环中的li对象是否是当前的li对象
							if(lis[j] == this){
								index = j;
							}
						}
						//1、给当前的li对象设置class样式即可
						this.className = "choosed";
						//2、将当前li对象的content内容的div设置为display:block
						divs[index].style.display = "block";
					};
				}
			
</script>
